<template>
  <div class="mbti-container">
    <el-page-header @back="goBack" :content="`${mbtiData.mbti_type} 人格分析`" />
    
    <el-card class="mbti-card" v-loading="loading">
      <!-- 核心特点 -->
      <section class="mbti-section">
        <h2><el-icon><User /></el-icon> 核心特点</h2>
        <el-divider />
        <div class="feature-item" style="white-space: pre-line">{{ mbtiData.characteristics }}</div>
      </section>

      <!-- 认知功能顺序 -->
      <section class="mbti-section">
        <h2><el-icon><List /></el-icon> 认知功能顺序</h2>
        <el-divider />
        <div class="cognitive-order-simple" style="white-space: pre-line">
          {{ mbtiData.cognitive_order }}
        </div>
      </section>

      <!-- 问题解决模式 -->
      <section class="mbti-section">
        <h2><el-icon><MagicStick /></el-icon> 问题解决模式</h2>
        <el-divider />
        <div class="feature-item" style="white-space: pre-line">{{ mbtiData.problem_solving_model }}</div>
      </section>

      <!-- 领导与学习模式 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <section class="mbti-section">
            <h3><el-icon><Suitcase /></el-icon> 领导模式</h3>
            <el-divider />
            <div class="feature-item" style="white-space: pre-line">{{ mbtiData.leadership_model }}</div>
          </section>
        </el-col>
        <el-col :span="12">
          <section class="mbti-section">
            <h3><el-icon><Reading /></el-icon> 学习模式</h3>
            <el-divider />
            <div class="feature-item" style="white-space: pre-line">{{ mbtiData.learning_model }}</div>
          </section>
        </el-col>
      </el-row>

      <!-- 工作环境 -->
      <section class="mbti-section">
        <h3><el-icon><OfficeBuilding /></el-icon> 理想工作环境</h3>
        <el-divider />
        <div class="feature-item" style="white-space: pre-line">{{ mbtiData.work_environment_prefs }}</div>
      </section>

      <!-- 缺点与建议 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <section class="mbti-section">
            <h3><el-icon><Warning /></el-icon> 潜在缺点</h3>
            <el-divider />
            <div class="weakness-item" style="white-space: pre-line">{{ mbtiData.potential_weaknesses }}</div>
          </section>
        </el-col>
        <el-col :span="12">
          <section class="mbti-section">
            <h3><el-icon><Opportunity /></el-icon> 发展建议</h3>
            <el-divider />
            <div class="suggestion-item" style="white-space: pre-line">{{ mbtiData.development_suggestions }}</div>
          </section>
        </el-col>
      </el-row>

      <!-- 适合领域 -->
      <section class="mbti-section">
        <h3><el-icon><DataAnalysis /></el-icon> 适合领域</h3>
        <el-divider />
        <div class="career-tags">
          <el-tag 
            v-for="(field, i) in formattedFields" 
            :key="'field'+i"
            type="info"
            class="career-tag"
            effect="plain"
          >
            {{ field }}
          </el-tag>
        </div>
      </section>

      <!-- 职业推荐 -->
      <section class="mbti-section">
        <h3><el-icon><Briefcase /></el-icon> 适合职业</h3>
        <el-divider />
        <div class="career-tags">
          <el-tag 
            v-for="(career, i) in formattedCareers" 
            :key="'career'+i"
            type="info"
            class="career-tag"
            effect="plain"
          >
            {{ career }}
          </el-tag>
        </div>
      </section>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const router = useRouter()
const route = useRoute()

const userInfo = ref(JSON.parse(localStorage.getItem('xm-pro-user')) || {})
// 获取路由参数
const mbtiType = ref('') // 创建一个响应式字符串变量
mbtiType.value = route.params.type as string
console.log(mbtiType.value) // 输出从URL获取的mbtiType

// 数据状态
const mbtiData = ref({
  mbti_type: '',
  characteristics: '',
  leadership_model: '',
  learning_model: '',
  cognitive_order: '',
  problem_solving_model: '',
  work_environment_prefs: '',
  potential_weaknesses: '',
  development_suggestions: '',
  suitable_fields: '',
  suitable_careers: ''
})
const loading = ref(true)



// 职业和领域的格式化函数
const formatWithCommas = (text?: string) => {
  if (!text) return []
  return text.split(/[、,，.。]/).filter(item => item.trim())
}

const formattedFields = computed(() => 
  formatWithCommas(mbtiData.value.suitable_fields)
)

const formattedCareers = computed(() => 
  formatWithCommas(mbtiData.value.suitable_careers)
)

// 获取数据
const fetchMBTIData = async () => {

try {
    loading.value = true
    
    // 根据路由参数请求对应数据
    const res = await request.get('/mbti/'+mbtiType.value)
    
    if (res.code === '200') {
      mbtiData.value = {
        mbti_type: res.data.mbtiType,
        characteristics: res.data.characteristics,
        leadership_model: res.data.leadershipModel,
        learning_model: res.data.learningModel,
        cognitive_order: res.data.cognitiveOrder,
        problem_solving_model: res.data.problemSolvingModel,
        work_environment_prefs: res.data.workEnvironmentPrefs,
        potential_weaknesses: res.data.potentialWeaknesses,
        development_suggestions: res.data.developmentSuggestions,
        suitable_fields: res.data.suitableFields,
        suitable_careers: res.data.suitableCareers
      }
    } else {
      ElMessage.error(res.msg || '获取数据失败')
      router.push('/') // 失败跳转到首页
    }
  } catch (error) {
    ElMessage.error('请求失败，请稍后重试')
    console.error('MBTI数据请求失败:', error)
  } finally {
    loading.value = false
  }

};

const goBack = () => {
  router.push('/mbtihistory')
}

onMounted(() => {
  if (userInfo.value.userId) {
    fetchMBTIData()
  } else {
    ElMessage.warning('请先登录')
    router.push('/login')
  }
})
</script>

<style scoped>
.mbti-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

.mbti-card {
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 24px;
  background-color: #fff;
}

.mbti-section {
  margin-bottom: 32px;
}

h2, h3 {
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  margin-bottom: 16px;
}

h2 {
  font-size: 22px;
  letter-spacing: 0.5px;
}

h3 {
  font-size: 18px;
}

.feature-item, .weakness-item, .suggestion-item {
  margin: 12px 0;
  padding: 12px;
  border-radius: 8px;
  line-height: 1.7;
}

.feature-item {
  background-color: #f8fafc;
}

.weakness-item {
  background-color: #fff5f5;
  border-left: 4px solid var(--el-color-danger);
}

.suggestion-item {
  background-color: #f6ffed;
  border-left: 4px solid var(--el-color-success);
}

.cognitive-order-simple {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-color-primary);
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
  text-align: center;
  margin: 16px 0;
}

.career-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.career-tag {
  margin: 0;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 16px;
  background-color: #f0f2f5;
  color: #555;
}

@media (max-width: 768px) {
  .mbti-container {
    padding: 12px;
  }
  
  .mbti-card {
    padding: 16px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  h3 {
    font-size: 17px;
  }
  
  .feature-item, .weakness-item, .suggestion-item {
    font-size: 14px;
    padding: 10px;
  }
}
</style>